<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, maximum-scale=1">
    <title>Unique</title>
    <link rel="icon" href="favicon.png" type="image/png">
    <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <link href="css/style.css" rel="stylesheet" type="text/css">
    <link href="css/font-awesome.css" rel="stylesheet" type="text/css">
    <link href="css/animate.css" rel="stylesheet" type="text/css">
    <script src="https://kit.fontawesome.com/bf51975b7f.js" crossorigin="anonymous"></script>

    <!--[if lt IE 9]>
    <script src="js/respond-1.1.0.min.js"></script>
    <script src="js/html5shiv.js"></script>
    <script src="js/html5element.js"></script>
<![endif]-->
</head>

<body>

    <!--Header_section-->
    <header id="header_wrapper">
        <div class="container">
            <div class="header_box">
                <div class="logo"><a href="#"><img src="img/logo.png" alt="logo"></a></div>
                <nav class="navbar navbar-inverse" role="navigation">
                    <div class="navbar-header">
                        <button type="button" id="nav-toggle" class="navbar-toggle" data-toggle="collapse"
                            data-target="#main-nav">
                            <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span
                                class="icon-bar"></span> <span class="icon-bar"></span> </button>
                    </div>
                    <div id="main-nav" class="collapse navbar-collapse navStyle">
                        <ul class="nav navbar-nav" id="mainNav">
                            <li class="active"><a href="#hero_section" class="scroll-link">Home</a></li>
                            <li><a href="#slides" class="scroll-link">NEWS</a></li>
                            <li><a href="#explore" class="scroll-link">EXPLORE</a></li>
                            <!-- <li><a href="#Portfolio" class="scroll-link">Portfolio</a></li> -->
                            <!-- <li><a href="#clients" class="scroll-link">Clients</a></li> -->
                            <li><a href="#Zone" class="scroll-link">Zone</a></li>
                            <li><a href="#contact" class="scroll-link">Contact</a></li>
                        </ul>
                    </div>
                </nav>
            </div>
        </div>
    </header>
    <!--Header_section-->

    <!--Footer-->
    <footer class="footer_wrapper" id="contact">
        <div class="container">
            <section class="page_section contact" id="contact">
                <div class="contact_section">
                    <h2>Start Your Trip On CREATIVE</h2>
                </div>
                <div class="row">
                    <!-- 昵称、身份(在校学生/企业工程师/编程爱好者)、目标、兴趣、目前基础 -->
                    <div class="col-lg-12 wow fadeInLeft delay-06s">
                        <div class="form">
                            <input type="text" class="form-control" placeholder="昵称 *" aria-describedby="basic-addon1">
                            <br />
                            <input type="email" class="form-control" placeholder="邮箱 *" aria-describedby="basic-addon1">
                            <br />
                            <div class="input-group">
                                <span class="input-group-addon" id="basic-addon1">+86</span>
                                <input type="text" class="form-control" placeholder="手机号"
                                    aria-describedby="basic-addon1">
                            </div>
                            <br />
                            <!-- 身份按钮组 -->
                            <div class="clickBox">
                                <Label>你的身份：</Label>
                                <div class="btn-group" role="group" aria-label="...">
                                    <button type="button" class="btn btn-default">在校学生</button>
                                    <button type="button" class="btn btn-default">企业工程师</button>
                                    <button type="button" class="btn btn-default">编程爱好者</button>
                                </div>
                            </div>
                            <br />
                            <!-- 兴趣方向按钮组 -->
                            <div class="clickBox">
                                <Label>兴趣方向：</Label>
                                <div class="btn-group" role="group" aria-label="...">
                                    <button type="button" class="btn btn-default">前端</button>
                                    <button type="button" class="btn btn-default">后端</button>
                                    <button type="button" class="btn btn-default">客户端</button>
                                    <button type="button" class="btn btn-default">客户端</button>
                                </div>
                            </div>
                            <br />
                            <!-- 目前基础按钮组 -->
                            <div class="clickBox">
                                <Label>目前基础：</Label>
                                <div class="btn-group" role="group" aria-label="...">
                                    <button type="button" class="btn btn-default">新手入门</button>
                                    <button type="button" class="btn btn-default">略有基础</button>
                                    <button type="button" class="btn btn-default">资深程序员</button>
                                </div>
                            </div>
                            <br />

                            <input type="text" class="form-control" placeholder="个人简介" aria-describedby="basic-addon1">
                            <br />

                            <div class="submitBox">
                                <button type="button" class="btn btn-default navbar-btn">登录</button>
                                <button type="button" class="btn btn-default navbar-btn">注册</button>
                            </div>
                        </div>
                    </div>

                </div>
            </section>
        </div>
        <div class="container">
            <div class="footer_bottom"><span>Copyright © 2022
                </span> </div>
        </div>
    </footer>

    <script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/jquery-scrolltofixed.js"></script>
    <script type="text/javascript" src="js/jquery.nav.js"></script>
    <script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
    <script type="text/javascript" src="js/jquery.isotope.js"></script>
    <script type="text/javascript" src="js/wow.js"></script>
    <script type="text/javascript" src="js/custom.js"></script>

</body>

</html>